<template>
  <div class="sys-menu-box">
    <el-container class="box-layout" height="100%">
      <el-aside class="sys-menu-tree" v-loading="treeLoading">
        <h4 class="tree-title">子系统菜单结构</h4>
        <el-tree
          ref="menuTree"
          class="tree-box"
          :data="treeData"
          :props="{label: 'resourceName'}"
          node-key="id"
          default-expand-all
          draggable
          highlight-current
          :allow-drop="treeAllowDrop"
          :render-content="renderContent"
          :expand-on-click-node="false"
          @node-drop="nodeDroped"
          @node-click="curMenuItem"
        />
      </el-aside>
      <el-container class="menu-list-box">
        <el-header height="60px">
          <div>
            <div>
              <b>{{ curSelectNode.resourceName }}</b>
              <el-button
                class="menu"
                size="mini"
                v-if="curSelectNode.resourceType === 0"
                >子系统</el-button
              >
              <el-button
                class="menu"
                size="mini"
                v-if="curSelectNode.resourceType === 1"
                >业务菜单</el-button
              >
              <el-button
                class="menu"
                size="mini"
                v-if="curSelectNode.resourceType === 3"
                >导航菜单</el-button
              >
            </div>
            <div v-if="curSelectNode.remark">
              描述：{{ curSelectNode.remark }}
            </div>
            <div v-if="parentResourceName">
              上级菜单：{{ parentResourceName }}
            </div>
          </div>
          <div>
            <!-- 编辑子系统 -->
            <el-button
              size="small"
              v-if="curSelect !== null && curSelect.resourceType === 0"
              @click.stop="editSystem"
              type="primary"
              >编辑信息</el-button
            >
            <!-- 编辑菜单 -->
            <!-- <el-button
              size="small"
              v-if="curSelect !== null && curSelect.resourceType === 3"
              @click.stop="editNavMenuHandle"
              type="primary"
              >编辑信息</el-button
            > -->
            <!-- 菜单保存 -->
            <el-button
              size="small"
              :loading="saveBtnLoading"
              v-if="(isAdd || isEdit) && curlevel !== 1"
              @click.stop="addMenu(isEdit)"
              type="primary"
              >保存</el-button
            >
          </div>
        </el-header>
        <el-main>
          <div>
            <!-- 选中节点 -->
            <el-form
              ref="menuParent"
              :model="curSelectNode"
              :rules="menuRule"
              :disabled="!isEdit"
              label-width="130px"
            >
              <!-- 根节点/子系统节点 -->
              <div v-if="curlevel === 1 || curlevel === ''">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="分组名称" prop="groupCode">
                      <el-select
                        v-model="curSelectNode.groupCode"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, index) in sysGroupArr"
                          :key="index"
                          :label="item.appGroupName"
                          :value="item.appGroupCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="applogo" prop="appogo">
                      <el-input
                        placeholder="请输入"
                        v-model="curSelectNode.appLogo"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="所属类型" prop="companyType">
                      <el-select
                        v-model="curSelectNode.companyType"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in companyTypeArr"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="app地址" prop="domain">
                      <el-input
                        placeholder="请输入"
                        v-model="curSelectNode.domain"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="app名称" prop="resourceName">
                      <el-input
                        placeholder="请输入"
                        v-model="curSelectNode.appName"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="app类型" prop="appType">
                      <el-select
                        v-model="dialogFormData.appType"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in systemType"
                          :key="item.val"
                          :label="item.lab"
                          :value="item.val"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="app编码" prop="appCode">
                      <el-input
                        placeholder="请输入"
                        v-model="curSelectNode.appCode"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <!-- 非根节点 -->
              <el-row v-else>
                <el-form-item label="菜单名称" prop="resourceName">
                  <el-input
                    placeholder="请输入"
                    v-model="curSelectNode.resourceName"
                  />
                </el-form-item>
                <el-form-item label="自定义唯一标识码" prop="resourceCode">
                  <el-input
                    placeholder="请输入"
                    v-model="curSelectNode.resourceCode"
                  />
                </el-form-item>
                <el-form-item label="icon" prop="resourceIcon">
                  <el-input
                    placeholder="请输入"
                    v-model="curSelectNode.resourceIcon"
                  />
                </el-form-item>
                <el-form-item label="菜单地址" prop="resourcePath">
                  <el-input
                    placeholder="请输入"
                    v-model="curSelectNode.resourcePath"
                  />
                </el-form-item>
              </el-row>
            </el-form>
          </div>
          <div v-if="isAdd">
            <el-header height="30px">
              <span>新增节点</span>
            </el-header>
            <el-form
              ref="menuChild"
              :model="addMenuNode"
              :rules="menuRule"
              label-width="130px"
            >
              <el-form-item label="icon" prop="imageUrl">
                <el-input placeholder="请输入" v-model="addMenuNode.imageUrl" />
              </el-form-item>
              <el-form-item label="菜单名称" prop="name">
                <el-input placeholder="请输入" v-model="addMenuNode.name" />
              </el-form-item>
              <el-form-item label="自定义唯一标识码" prop="code">
                <el-input placeholder="请输入" v-model="addMenuNode.code" />
              </el-form-item>
              <el-form-item label="菜单类型" prop="type">
                <el-select v-model="addMenuNode.type" placeholder="请选择">
                  <el-option label="菜单" value="1" />
                  <el-option label="按钮权限" value="2" />
                  <el-option label="其他" value="3" />
                </el-select>
              </el-form-item>
              <el-form-item label="菜单地址" prop="path">
                <el-input placeholder="请输入" v-model="addMenuNode.path" />
              </el-form-item>
            </el-form>
          </div>
          <!-- 体系维护 -->
          <div
            class="structure"
            v-if="curSelect === null || curSelect.id === '0'"
          >
            <label for="适用体系">适用体系</label>
            <el-select
              v-model="structureName"
              clearable
              filterable
              remote
              :remote-method="getStructureList"
              placeholder="请选择适用体系"
            >
              <el-option
                v-for="item in structureList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" @click="updateStructure">确认</el-button>
          </div>
          <!-- 下级组织 -->
          <div v-if="curSelectChildrenNode.resourceType !== 2" class="subOrg">
            <div class="title">
              <span>下级菜单</span>
              <el-button type="primary" @click="addSubMenu"
                >新增下级菜单</el-button
              >
            </div>
            <el-row
              class="row"
              v-for="(item, index) in curSelectChildrenNode.children"
              :key="index"
            >
              <el-col :span="24">
                <div class="content">
                  <span>
                    <span class="name">{{ item.resourceName }}</span>
                    <el-button
                      class="menu"
                      size="mini"
                      v-if="item.resourceType === 3"
                      >导航菜单</el-button
                    >
                    <el-button
                      class="menu"
                      size="mini"
                      v-if="item.resourceType === 1"
                      >业务菜单</el-button
                    >
                  </span>
                  <el-button
                    @click="subOrg(item)"
                    class="arrow"
                    size="mini"
                    icon="el-icon-arrow-right"
                  ></el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 下级菜单 -->
          <sub-menu ref="subMenu" @getAppsTree="getAppsTree"></sub-menu>
          <el-dialog
            title="编辑导航菜单"
            :visible.sync="editNavMenuVisible"
            width="30%"
            :before-close="handleClose"
          >
            <el-form
              label-width="80px"
              :model="formNavMenuData"
              :rules="rulesNavMenu"
              ref="formNavMenuData"
            >
              <el-form-item label="菜单名称" prop="resourceName">
                <el-input
                  v-model="formNavMenuData.resourceName"
                  clearable
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item label="icon">
                <el-input
                  v-model="formNavMenuData.resourceIcon"
                  clearable
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item label="说明">
                <el-input
                  type="textearea"
                  v-model="formNavMenuData.remark"
                  clearable
                  placeholder="请输入"
                />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="editNavMenuVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitEditNavMenu"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <!-- 编辑子系统 -->
          <el-dialog
            title="修改子系统"
            height="250"
            @close="dialogClose"
            :visible.sync="dialogVisible"
            width="500px"
          >
            <el-form
              ref="dialogForm"
              :model="dialogFormData"
              :rules="formRules"
              label-width="130px"
            >
              <el-form-item label="分组名称" prop="groupCode">
                <el-select
                  :loading="appGroupLoading"
                  v-model="dialogFormData.groupCode"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in sysGroupArr"
                    :key="index"
                    :label="item.appGroupName"
                    :value="item.appGroupCode"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="所属类型" prop="companyType">
                <el-select
                  v-model="dialogFormData.companyType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in companyTypeArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="app名称" prop="appName">
                <el-input
                  placeholder="请输入"
                  v-model="dialogFormData.appName"
                />
              </el-form-item>
              <el-form-item label="app编码" prop="appCode">
                <el-input
                  placeholder="请输入"
                  v-model="dialogFormData.appCode"
                />
              </el-form-item>
              <el-form-item label="appLogo" prop="appLogo">
                <el-input
                  placeholder="请输入"
                  v-model="dialogFormData.appLogo"
                />
              </el-form-item>
              <el-form-item label="app地址" prop="domain">
                <el-input
                  placeholder="请输入"
                  v-model="dialogFormData.domain"
                />
              </el-form-item>
              <el-form-item label="app类型" prop="appType">
                <el-select
                  v-model="dialogFormData.appType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in systemType"
                    :key="item.val"
                    :label="item.lab"
                    :value="item.val"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="子系统描述" prop="appDesc">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="dialogFormData.appDesc"
                />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button
                :loading="dialogBtnLoading"
                type="primary"
                @click="updateSysApp"
                >确定</el-button
              >
              <el-button @click="dialogVisible = false">取消</el-button>
            </span>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {menuRule, formRules} from './const.js'
import {companyTypeStr} from '@const/common.js'
import ElEditable from '@components/el-editable/door/index.vue'
import subMenu from '@/moduleComponents/menuManagement/subMenu.vue'
import {
  getAppResourceTree,
  appResourceAdd,
  menuDeleteById,
  appResourceSort,
  appResourceUpdate,
  appUpadate,
  deleteResource,
  getAppGroups,
  updateFactoryCompanyId, // 更新体系
  commonGetAllEnums, // 通用枚举值
  appGetById // 根据ID查询子系统
} from '@const/api_staffCenter.js'
import {
  companyDownList // 体系
} from '@const/api_authCenter.js'
import {hasIn, cloneDeep} from 'lodash'
import {getTreeDataByKey} from '@const/utils.js'
export default {
  name: 'SysMenu',
  components: {ElEditable, subMenu},
  data() {
    return {
      menuRule,
      treeLoading: false,
      treeData: [],
      curSelectNode: {
        // 左侧选中的节点
        resourceName: '',
        groupCode: ''
      },
      companyTypeArr: [], // 所属类型
      curSelectChildrenNode: {
        children: {}
      }, // 左侧选中的节点，下级菜单
      addMenuNode: {}, // 新增的节点
      curSelect: null, // 是否选中
      saveBtnLoading: false, // 保存按钮loading
      isAdd: false, // 新增
      isEdit: false, // 修改
      sysGroupArr: [],
      curlevel: '',
      curItemTreeData: {},
      editNavMenuVisible: false,
      formNavMenuData: {
        id: '',
        resourceName: '',
        resourceIcon: '',
        remark: ''
      },
      rulesNavMenu: {
        resourceName: [
          {required: true, message: '请输入活动名称', trigger: 'blur'}
        ]
      },
      parentResourceName: '',
      dialogFormData: {},
      formRules,
      dialogVisible: false,
      appGroupLoading: false,
      dialogBtnLoading: false,
      systemType: [
        {
          val: 1,
          lab: '内部系统'
        },
        {
          val: 2,
          lab: '外部系统'
        }
      ],
      structureName: '',
      structureList: [
        {
          label: 11,
          value: 22
        }
      ]
    }
  },
  mounted() {
    // this.getStructureList()
    this.getAllEnums()
    this.getAppsTree()
    this.getAppGroups()
    this.getSysById()
    this.companyTypeArr = Object.keys(companyTypeStr).map(item => {
      return {label: companyTypeStr[item], value: item}
    })
  },
  methods: {
    getAllEnums() {
      this.$axios({
        method: 'GET',
        url: commonGetAllEnums
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.companyTypeArr = data.companyTypeEnum
        })
        .finally(() => {})
    },
    getAppGroups() {
      this.appGroupLoading = true
      this.$axios({
        url: getAppGroups,
        method: 'get'
      })
        .then(res => {
          this.sysGroupArr = hasIn(res, ['data', 'payload'])
            ? res.data.payload
            : []
        })
        .finally(() => {
          this.appGroupLoading = false
        })
    },
    // 拼接数据结构
    pushTree(arr) {
      this.treeData = [
        {
          resourceName: this.$route.query.name + '',
          children: arr,
          id: '0',
          resourceType: 0
        }
      ]
      this.curSelectChildrenNode = {children: arr}
    },
    getAppsTree() {
      this.treeLoading = true
      this.$axios({
        url: `${getAppResourceTree}?appId=${this.$route.query.id}`,
        method: 'get',
        data: {appId: this.$route.query.id}
      })
        .then(res => {
          let arr = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          this.pushTree(arr)
        })
        .finally(() => {
          this.treeLoading = false
        })
    },
    curMenuItem(data, node) {
      let newNode = cloneDeep(data)
      newNode.parentLevel = node.parent.data.level
      this.curlevel = node.level
      this.tableData = newNode.children
      if (node.level === 1) {
        this.getSysById()
      } else {
        this.curSelectNode = newNode
      }
      this.curSelectChildrenNode = newNode
      this.curSelect = newNode
      this.isAdd = false
      this.isEdit = false
      this.parentResourceName = ''
      this.getParentResourceName(this.treeData, this.curSelect.parentId)
    },
    getParentResourceName(treeData, pid) {
      treeData.forEach(item => {
        if (item.id === pid) {
          this.parentResourceName = item.resourceName
        }
        if (item.children && item.children.length > 0) {
          this.getParentResourceName(item.children, pid)
        }
      })
    },
    editMenuHandle() {
      this.companyTypeArr = Object.keys(companyTypeStr).map(item => {
        return {label: companyTypeStr[item], value: item}
      })
      if (this.curSelect) {
        this.isAdd = false
        this.isEdit = true
      } else {
        this.$message({type: 'warning', message: '请先选中菜单节点'})
      }
    },
    editSystem() {
      this.dialogVisible = true
    },
    getSysById() {
      this.$axios({
        method: 'GET',
        url: `${appGetById}?id=${this.$route.query.id}`
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          this.curSelectNode = data
          this.dialogFormData = cloneDeep(data)
          this.structureName = data.factoryCompanyId
          this.curSelectNode.resourceType = 0
          this.curSelectNode.resourceName = data.appName
          this.structureList = []
          if (data.factoryCompanyId) {
            this.structureList.push({
              value: data.factoryCompanyId,
              label: data.factoryCompanyName
            })
          } else {
            this.getStructureList()
          }
        })
        .finally(() => {})
    },
    dialogClose() {
      this.dialogVisible = false
      this.$refs.dialogForm.resetFields()
    },
    updateSysApp() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.dialogBtnLoading = true
          let obj = {
            id: this.$route.query.id,
            groupCode: this.dialogFormData.groupCode,
            appCode: this.dialogFormData.appCode,
            appName: this.dialogFormData.appName,
            appDesc: this.dialogFormData.appDesc,
            companyType: this.dialogFormData.companyType,
            appLogo: this.dialogFormData.appLogo,
            appType: this.dialogFormData.appType,
            domain: this.dialogFormData.domain
          }
          this.flagUpdate && (obj.id = this.dialogFormData.id)
          this.$axios({
            method: 'post',
            url: appUpadate,
            data: obj
          })
            .then(res => {
              if (res.data.code === '0') {
                this.$message.success('操作成功')
                this.getAppsTree()
                this.getSysById()
              }
            })
            .finally(() => {
              this.dialogVisible = false
              this.dialogBtnLoading = false
            })
        } else {
          return false
        }
      })
    },
    // 编辑导航菜单
    editNavMenuHandle() {
      this.formNavMenuData = {
        id: this.curSelect.id,
        resourceName: this.curSelect.resourceName,
        resourceIcon: this.curSelect.resourceIcon,
        remark: this.curSelect.remark
      }
      this.editNavMenuVisible = true
    },
    // 关闭导航菜单
    handleClose(done) {
      done()
    },
    // 提交编辑导航菜单
    submitEditNavMenu() {
      this.$refs['formNavMenuData'].validate(valid => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: appResourceUpdate,
            data: this.formNavMenuData
          })
            .then(res => {
              this.getAppsTree()
              this.curSelectNode = {}
              this.addMenuNode = {}
              this.curSelect = null
            })
            .finally(() => {
              this.editNavMenuVisible = false
            })
        } else {
          return false
        }
      })
    },
    addMenuHandle() {
      if (this.curSelect) {
        this.isAdd = true
        this.isEdit = false
      } else {
        this.$message({type: 'warning', message: '请先选中菜单节点'})
      }
    },
    addMenu(flag) {
      let target = flag ? 'menuParent' : 'menuChild'
      this.$refs[target].validate(valid => {
        if (valid) {
          this.saveBtnLoading = true
          let obj = {
            resourceImage: flag
              ? this.curSelectNode.imageUrl
              : this.addMenuNode.imageUrl, //资源名称，必传
            resourceName: flag
              ? this.curSelectNode.name
              : this.addMenuNode.name, //资源名称，必传
            resourceCode: flag
              ? this.curSelectNode.code
              : this.addMenuNode.code, //资源编码，必传
            resourceType: flag
              ? this.curSelectNode.type
              : this.addMenuNode.type, //资源类型
            resourcePath: flag
              ? this.curSelectNode.path
              : this.addMenuNode.path, //资源路径，必传
            resourceDesc: '', //资源描述
            resourceImage: flag
              ? this.curSelectNode.imageUrl
              : this.addMenuNode.imageUrl, //资源图片路径
            parentLevel: flag
              ? this.curSelectNode.parentLevel || '0'
              : this.curSelectNode.level || '0' //父级资源层级，必传
          }
          //资源上一级id，必传
          !flag && (obj.parentId = this.curSelectNode.id || '-1')
          // 如果是修改需要添加id
          flag && (obj.id = this.curSelectNode.id)
          // 该资源所属的子系统的ID，必传
          obj.appId = this.$route.query.id
          this.$axios({
            method: 'post',
            url: flag ? appResourceUpdate : appResourceAdd,
            data: obj
          })
            .then(res => {
              this.getAppsTree()
              this.curSelectNode = {}
              this.addMenuNode = {}
              this.curSelect = null
            })
            .finally(() => {
              this.isAdd = false
              this.isEdit = false
              this.saveBtnLoading = false
            })
        } else {
          return false
        }
      })
    },
    // 可删除的树
    renderContent(h, {node, data}) {
      if ((data.children && data.children.length) || !data.id) {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
              <span style="margin-right:10px;">{node.label}</span>
              {node.data.resourceType == '1' ||
              node.data.resourceType == '3' ? (
                <el-tag size="mini">菜单</el-tag>
              ) : (
                <el-tag type="success" size="mini">
                  系统
                </el-tag>
              )}
            </span>
            <span>
              <div
                class="el-icon-error"
                style="font-size: 12px;margin-left:5px;"
                type="text"
                on-click={() => this.deleteNode(node, data)}
              />
            </span>
          </span>
        )
      } else {
        if (node.data.resourceType == '2') {
          return (
            <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
              <span>
                <span style="margin-right:10px;">{node.label}</span>
                {node.data.resourceType == '2' ? (
                  <el-tag size="mini" type="warning">
                    按钮
                  </el-tag>
                ) : (
                  ''
                )}
              </span>
            </span>
          )
        } else {
          return (
            <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
              <span>
                <span style="margin-right:10px;">{node.label}</span>
                {node.data.resourceType == '1' ? (
                  <el-tag size="mini">菜单</el-tag>
                ) : (
                  ''
                )}
                {node.data.resourceType == '3' ? (
                  <el-tag size="mini">菜单</el-tag>
                ) : (
                  ''
                )}
              </span>
              <span>
                <div
                  class="el-icon-error"
                  style="font-size: 12px;margin-left:5px;"
                  type="text"
                  on-click={() => this.deleteNode(node, data)}
                />
              </span>
            </span>
          )
        }
      }
    },
    deleteNode(node, data) {
      this.$confirm('是否确定要删除该菜单，删除后无法还原？', '确认信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.treeLoading = true
        this.$axios({
          url: deleteResource,
          method: 'POST',
          data: {id: data.id}
        })
          .then(res => {
            // 获取tree的信息
            this.getAppsTree()
            // 重置两个表单的数据
            this.$refs['menuParent'].resetFields()
            this.$refs['menuChild'] && this.$refs['menuChild'].resetFields()
          })
          .finally(() => {
            this.treeLoading = false
          })
      })
    },
    // tree节点是否可以移动
    treeAllowDrop(dragNode, dropNode, type) {
      if (dragNode.data.resourceType === 2) {
        return false
      } else {
        return true
      }
    },
    changeTreeData(data, level, key) {
      data.children.forEach((item, index) => {
        if (key === item.id) {
          this.curItemTreeData = {
            id: item.id,
            index: index,
            level: level,
            parentId: data.id ? data.id : 0,
            preId: index === 0 ? 0 : data.children[index - 1].id
          }
        }
        if (item.children && item.children.length > 0) {
          this.changeTreeData(item, (level += 1), key)
        }
      })
    },
    // 拖拽成功时，数据已经发生改变
    nodeDroped(dragNode) {
      if (this.treeData[0].children.length > 0) {
        this.changeTreeData(this.treeData[0], 1, dragNode.key)
      }
      let params = {
        id: dragNode.key,
        appId: dragNode.data.appId,
        parentId: this.curItemTreeData.parentId,
        preId: this.curItemTreeData.preId
      }
      this.treeLoading = true
      this.$axios({
        url: appResourceSort,
        method: 'post',
        data: params
      })
        .then(res => {
          this.getAppsTree()
        })
        .finally(() => {
          this.treeLoading = false
        })
    },
    // 进入下级菜单
    subOrg(item) {
      this.curSelectChildrenNode = item
      this.curSelectNode = item
      this.curlevel = 0 //非根节点
      this.$nextTick(() => {
        // 选中下级节点高亮
        this.$refs.menuTree.setCurrentKey(item.id)
      })
    },
    addSubMenu() {
      this.$refs.subMenu.showDialog(this.curSelectNode)
    },
    // 适用体系
    getStructureList(name = '') {
      this.$axios({
        url: `${companyDownList}?type=factory&name=${name}`,
        method: 'get',
        data: {}
      })
        .then(res => {
          if (res.data.code === '0') {
            let data = hasIn(res, 'data.payload') ? res.data.payload : []
            this.structureList = []
            this.structureList = data.map(item => {
              return {
                label: item.name,
                value: item.id
              }
            })
            // this.getSysById()
          }
        })
        .finally(() => {})
    },
    // 适用体系
    updateStructure() {
      this.$axios({
        url: updateFactoryCompanyId,
        method: 'post',
        data: {
          factoryCompanyId: this.structureName,
          id: this.$route.query.id
        }
      })
        .then(res => {
          if (res.data.code === '0') {
            this.$message.success('操作成功')
          }
        })
        .finally(() => {})
    }
  }
}
</script>
<style lang="less">
.sys-menu-box {
  height: 100%;
  display: flex;
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
  }
  .el-icon-caret-right::before {
    content: '+' !important;
    font-size: 16px;
  }
  .expanded::before {
    content: '-' !important;
    font-size: 16px;
  }
  .is-leaf.el-tree-node__expand-icon.el-icon-caret-right::before {
    content: '' !important;
    font-size: 16px;
  }
  .box-layout {
    .sys-menu-tree {
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;

      .tree-title {
        font-size: 16px;
        margin: 5px 0 10px 10px;
      }

      .tree-box {
        overflow: auto;
        flex: 1;
        padding-bottom: 10px;
      }
    }
    .menu-list-box {
      .el-header {
        display: flex;
        justify-content: space-between;
        > span {
          font-size: 16px;
          font-weight: bold;
        }
      }
      .el-main {
        padding-bottom: 0;
        .el-input {
          max-width: 600px;
        }

        .el-header {
          margin: 20px 0;
        }
      }
    }
  }
  .menu {
    background-color: rgba(73, 192, 175, 0.1);
    border-color: rgba(73, 192, 175, 0.2);
    color: #49c0af;
  }
  .structure {
    margin: 15px 0 0 0;
  }
  // 下级组织
  .subOrg {
    margin-top: 40px;
    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .row {
      border: 1px solid #dcdfe6;
      padding: 5px 0;
      border-bottom: none;
      &:last-child {
        border: 1px solid #dcdfe6;
      }
      .content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .name {
          text-indent: 67px;
          width: 200px;
          display: inline-block;
        }
        .arrow {
          border: none;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
